<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>
        <label>全选：<input type="checkbox" class="checkAll"></label>
    </p>
    <p>反选：
        <input type="checkbox" class="checkOne">
        <input type="checkbox" class="checkOne">
        <input type="checkbox" class="checkOne">
        <input type="checkbox" class="checkOne">
        <input type="checkbox" class="checkOne">
    </p>
</body>
<script>
    var checkAll = document.getElementsByClassName("checkAll")[0];
    var checkOne = document.getElementsByClassName("checkOne");
    console.log(checkOne);

    //全选，点击全部选中
    checkAll.onclick = function () {
        var status = this.checked;
        console.log(status);
        for (var i = 0; i < checkOne.length; i++) {
            checkOne[i].checked = status;
        }
    }


    //反选，所以都单选被选中时全选也选中
    for (let i = 0; i < checkOne.length; i++) {
        let one = checkOne[i];

        one.onclick = function () {

            //1.假设法
            var flag = true;
            for (var j = 0; j < checkOne.length; j++) {
                var item = checkOne[j];
                console.log(item.checked);
                if (!item.checked) {
                    flag = false;
                    break;
                }
            }
            checkAll.checked = flag;

            //2.计数法
            // var sum = 0;
            // for (var j = 0; j < checkOne.length; j++) {
            //     var item = checkOne[j];
            //     sum += item.checked;
            // }
            // console.log(sum);
            // checkAll.checked = sum == checkOne.length ? true : false;

            //3. 
            // var checkedList = document.querySelectorAll(".checkOne:checked");
            // console.log(checkedList);
            // checkAll.checked = checkedList.length == checkOne.length ? true : false;

        }
    }

</script>

</html>